<template>
    <div class="scrollTop" @click="returnTop" v-show="flag_scroll">
        <!-- <div class="scrollTop" @click="returnTop"> -->
        <span class="mui-icon-extra mui-icon-extra-top"></span>
    </div>
</template>

<script>
    export default {
        name: "ScrollTop",
        data() {
            return {
                flag_scroll: false,
            };
        },
        methods: {
            // 实现返回顶部效果
            returnTop() {
                document.documentElement.scrollTop = document.body.scrollTop = 0;
            },
            //  滑动超过800px时显示按钮
            handleScroll() {
                let scrolltop =
                    document.documentElement.scrollTop || document.body.scrollTop;
                scrolltop > 800 ? (this.flag_scroll = true) : (this.flag_scroll = false);
                // console.log(scrolltop)
            },
        },
        mounted() {
            // 此处true需要加上，不加滚动事件可能绑定不成功
            window.addEventListener("scroll", this.handleScroll, true);
        },
    }
</script>

<style lang="scss" scoped>
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    .scrollTop {
        position: fixed;
        width: 40px;
        height: 20px;
        right: 10px;
        bottom: 125px;
        padding: 10px 0;
        text-align: center;
        background-color: white;
        opacity: 50%;
        border-radius: 20%;
        overflow: hidden;
        box-sizing: content-box;
        font-size: 14px;
        box-shadow: 0.5em 0.5em 1em #888888;
    }

</style>
